<template>
	<view>
		<view class="content">
			<view class="tit">反馈内容</view>
			<view class="textarea">
				<textarea v-model="params.content" maxlength="365" placeholder-class="input_text_s" placeholder="请输入您的宝贵意见"></textarea>
				<view class="ts">{{ params.content.length }}/365</view>
			</view>
			<imageUpload :imgList="imgList" @change="imgChange" :upWith="120" :upHeight="120"></imageUpload>
		</view>
		<view class="inputs flex_jc_sb">
			<view class="t1">联系电话</view>
			<view class="">
				<input v-model="params.phone" maxlength="11" type="number" placeholder="请输入联系电话" placeholder-class="input_text_s" />
			</view>
		</view>
		<view class="bottom_btns">
			<view class="cont">
				<view class="onebtns" :class="btnactive ? 'active' : ''" @click="submitComment">提交</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, watch } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { feedbackAdd } from '@/api/about.js';
const btnactive = ref(false);
const params = reactive({
	content: '', //内容
	file: '', //文件，多个文件使用英文逗号“,”拼接
	phone: '' //联系方式
});
watch(
	() => params.content,
	(newQuestion) => {
		btnactive.value = newQuestion.length > 0;
	}
);
const imgList = ref([]);
const imgChange = (e) => {
	imgList.value = e;
};
// 提交
const submitComment = () => {
	if(btnactive.value){
		if (imgList.value.length != 0) {
			params.file = imgList.value
				.map((item) => {
					return item.url;
				})
				.join(',');
		}
		feedbackAdd(params).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: '已提交反馈',
					icon: 'none'
				});
			}
		});
	}

};
</script>
<style lang="scss">
page {
	background: #f7f8f6;
}
.content {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;
	padding: 20rpx;
	box-sizing: border-box;
	.tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
	}
	.textarea {
		textarea {
			width: 100%;
			height: 260rpx;
			margin: 15rpx auto;
			font-size: 28rpx;
			color: #1b1b1b;
		}
		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #aeaeac;
			text-align: right;
		}
	}
}
.inputs {
	width: 710rpx;
	height: 80rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 0rpx 20rpx;
	margin: 20rpx auto;
	box-sizing: border-box;
	.t1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1b1b1b;
	}
	input {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #1b1b1b;
		text-align: right;
	}
}
</style>
